<template>
  <!-- :ref="widget.id" -->
  <container-item-wrapper :widget="widget"
    id="alertId">
    <el-card :key="widget.id"
      ref="cardRef"
      class="card-container"
      :class="[!!widget.options.folded ? 'folded' : '', customClass]"
      :shadow="widget.options.shadow"
      :style="{width: widget.options.cardWidth + '!important' || ''}"
      v-show="!widget.options.hidden">
      <!-- <template #header>
        <div class="clear-fix">
          <span>{{widget.options.label}}</span>
          <i v-if="widget.options.showFold" class="float-right" @click="toggleCard">
            <template v-if="!widget.options.folded">
              <el-icon><ArrowDown /></el-icon>
            </template>
            <template v-else>
              <el-icon><ArrowUp /></el-icon>
            </template>
          </i>
        </div>
      </template> -->
      <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
        <template v-for="(subWidget, swIdx) in widget.widgetList">
          <template v-if="'container' === subWidget.category">
            <component :is="getComponentByContainer(subWidget)"
              :widget="subWidget"
              :key="swIdx"
              :parent-list="widget.widgetList"
              :index-of-parent-list="swIdx"
              :parent-widget="widget">
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($slots)"
                v-slot:[slot]="scope">
                <slot :name="slot"
                  v-bind="scope" />
              </template>
            </component>
          </template>
          <template v-else>
            <component :is="subWidget.type + '-widget'"
              :field="subWidget"
              :designer="null"
              :key="swIdx"
              :parent-list="widget.widgetList"
              :index-of-parent-list="swIdx"
              :parent-widget="widget">
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($slots)"
                v-slot:[slot]="scope">
                <slot :name="slot"
                  v-bind="scope" />
              </template>
            </component>
          </template>
        </template>
      </template>
    </el-card>
    <div ref="dialogContentRef">
      <RKDialog ref="rkDialogRef"
        :visible="visible"
        :="widget.options.dialogConfig"
        :className="widget.options.dialogConfig.customClass"
        :showHeader="widget.options.dialogConfig.headerConfig.showHeader"
        :showFooter="widget.options.dialogConfig.footerConfig.showFooter"
        :title="widget.options.dialogConfig.headerConfig.title"
        @open="onDialogOpened"
        @confirm="onConfirm"
        @close="showDialog(false)"
        @cancel="onCancel">
      </RKDialog>
    </div>
  </container-item-wrapper>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from "@/utils/i18n"
import refMixin from "@/components/form-render/refMixin"
import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { RKDialog } from '@/components/vf-dialog'
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import XEUtils from "xe-utils"

export default {
  name: "dialog-item",
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin, fieldMixin, containerItemMixin],
  components: {
    ContainerItemWrapper,
    ...FieldComponents,
    ArrowDown,
    ArrowUp,
    RKDialog
  },
  props: {
    widget: Object,
  },
  inject: ['refList', 'sfRefList', 'globalModel'],
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    customClass() {
      return this.widget.options.customClass || ''
    },
    dialogRef() {
      return this.$refs['rkDialogRef']
    },
    cardRef() {
      return this.$refs['cardRef']
    },
    dialogContentRef() {
      return this.$refs['dialogContentRef']
    },
  },

  created() {
    this.initRefList()
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  // watch: {
  //   'field.options.fieldOptions': {
  //     deep: true,
  //     immediate: true,
  //     handler(newValue, oldValue) {
  //       if (newValue && newValue.length > 0) {
  //         const defaultItem = newValue.find((item) => item.default === true);
  //         this.leftValue = defaultItem ? defaultItem.value : '';
  //         this.leftLabel = defaultItem ? defaultItem.label : '';
  //       } else {
  //         this.field.options.rightHidden = true
  //         this.field.options.buttonCurrentValue = ''
  //       }
  //     }
  //   }
  // },
  methods: {
    toggleCard() {
      this.widget.options.folded = !this.widget.options.folded
    },
    initRefList() {
      if ((this.widget.type == 'dialog') && !!this.widget.options.name) {
        this.refList[this.widget.options.name] = this
      }
    },
    addElement() {
      var targetElement = this.dialogContentRef.querySelector('.vxe-modal--content')
      const cardEl = this.$refs.cardRef.$el || this.$refs.cardRef
      if (targetElement && cardEl) {
        const clonedContent = XEUtils.clone(cardEl, true)
        clonedContent.style.display = 'block'
        clonedContent.style.height = '100%'
        targetElement.replaceChildren(clonedContent)
      }
    },
    removeElement() {
      var targetElement = this.dialogContentRef.querySelector('.vxe-modal--content')
      const cardEl = this.$refs.cardRef.$el || this.$refs.cardRef
      if (targetElement && cardEl) {
        const clonedContent = XEUtils.clone(cardEl, true)
        clonedContent.style.display = 'none'
        clonedContent.style.height = '0px'
        targetElement.replaceChildren(clonedContent)
      }
    },
    showDialog(show = true) {
      if (show) {
        this.dialogRef.open()
      } else {
        this.dialogRef.close()
        this.$nextTick(() => {
          this.removeElement()
        })

      }
    },
    onConfirm() {
      this.handleDialogWidgetClick({}, 'onConfirm')
    },
    onCancel() {
      this.handleDialogWidgetClick({}, 'onCancel')
    },
    onDialogOpened() {
      this.$nextTick(() => {
        this.addElement()
      })
      this.handleDialogWidgetClick({}, 'onOpened')
    },
  },
}
</script>

<style lang="scss" scoped>
:deep(.el-card__body > .form-widget-list) {
  width: 100% !important;
  height: 100% !important;
}
:deep(.el-card__body > .container-wrapper:has(.tab-container)) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.el-card) {
  border: none !important;
}
// 源代码
:deep(.el-card__body) {
  padding: 0;
  height: auto;
}
:deep(.el-card__body:has(.layout-full-container)) {
  height: 100% !important;
  .container-wrapper {
    height: 100% !important;
  }
}
:deep(.el-card__body:has(.static-content-item .vxe-grid)) {
  height: 100% !important;
}

:deep(.el-card__body) {
  transition: height 0.3s ease;
}
:deep(.el-card__header) {
  padding: 10px 12px;
}

.folded :deep(.el-card__body) {
  display: none;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>
